<html lang=zh-cmn-Hans>
<head>
	
    <!-- <script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.1.4/lib/p5.min.js"></script> -->
	<title>George Guo的网站</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="style.css">
	<!-- <script language="javascript" type="text/javascript" src="sketch.js"></script> -->
	
	

			<!-- <script>src=accountpageTransis.js</script>	 -->
</head>
<body>
	<header>
		<h1 >你好，欢迎光临 </h1>
	</header>
	 <nav id="wrapper">
		
			<ul>
				<li><a href="index.html">主页</a></li>
				<li><a href="myaccount.html">我的</a></li>
				<li><a href="subpage.html">问卷</a></li>
				<li><a href="secretpage.html">分享</a></li>
			</ul>
			<button id="btn1" style="width: 100;" onclick='showSETTING()' class="btnClass" disabled='true'>我的问题</button>
			<button id="btn2"   style="width: 100;" onclick='showRECEIVE()' >我收到的回答</button>
			
		
		<h3>----------------------------------------------------编辑问题------------------------------------------------</h3>
		<div id='quecontainer' >
		<p class="para1">设置你的问答题</p>
		<br>		
		<input type="text" class='questions' id="quesof1"><p id="para2">问题一</p>
		<input type="text" class='questions' id="quesof2"><p id="para3">问题二</p>
		<input type="text" class='questions' id="quesof3"><p id="para4">问题三</p>
		<input type="text" class='questions' id="quesof4"><p id="para5">问题四</p>
		<input type="text" class='questions' id="quesof5"><p id="para6">问题五 </p>		
        <br>
		<input type="button" value="新建问题" onclick="add('text')"/>
		<br>
		</div>
			<div> <input type="submit"  id='submques'>-------------  提交前请先登录。提交后会覆盖已经保存的问题。</input></div>	
		</div >

		<div id="container" ></div>
		<div id='container1' >
			<form>
				<h2>新建选择题</h2>
				<br/>
				<input type="text" class='mquestions' id="mquesof1"><p clsas="mulq">选择题一</p>
				<!-- <input type="text" class='mqueAnswers' id="mque1answer"><p class="mulqanswers">选择题一答案</p> -->
				<input type="text" class='mquestions' id="mquesof2"><p clsas="mulq">选择题二</p>
				<!-- <input type="text" class='mqueAnswers' id="mque2answer"><p class="mulqanswers">选择题二答案</p> -->
				<input type="text" class='mquestions' id="mquesof3"><p clsas="mulq">选择题三</p>
				<!-- <input type="text" class='mqueAnswers' id="mque3answer"><p class="mulqanswers">选择题三答案</p> -->
				<input type="text" class='mquestions' id="mquesof4"><p clsas="mulq">选择题四</p>
				<!-- <input type="text" class='mqueAnswers' id="mque4answer"><p class="mulqanswers">选择题四答案</p> -->
				<input type="text" class='mquestions' id="mquesof5"><p id="para6">选择题五 </p>		
				<!-- <input type="text" class='mqueAnswers' id="mque5answer"><p class="mulqanswers">选择题五答案</p> -->
				<form class="new" >
					<div id="dynamicInput"></div>
					<p>----答案选项1------------------答案选项2----------------答案选项3---------------答案选项4----------------------------------</p>
					<input type="text" id='answer'><input type="text" id='answer1'><input type="text" id='answer2'><input type="text" id='answer3'>
					
					<input type="button" id='addbtn' value="为第1题添加答案" onclick="addInput('dynamicInput');" />
					<input type="button" id='savebtn' value="删除" onclick="deletAnswers()"/>
					<br>
					添加后请在挑选框中选中正确答案

				</form>
				<input type="button" value="新建选择题" onclick="addMultiq('text')"/>
				<br>
				
		</div>
		<div><input type="submit"  id='submultmques' value='提交我的选择题' onclick="submitMulti()">至少提交五道</div>
        <div id='container2'></div>
	</nav>
	
	<nav id="wrapper1" >
     <h2 style="text-align: center; ">我收到的答案</h2>
	</nav>
	    
	</body>
	  <script> 
	if ( localStorage.getItem('currentUSER')){
		var userid = localStorage.getItem('currentUSER')
	 
	  ////////////////////////////////////////////////////////////////////新建问题***********************************************************/
	  	
		var i= 6
		function add(type) {
	var element = document.createElement("input");
	//Assign different attributes to the element.
	element.setAttribute("type", type );
	element.setAttribute("value", '问题'+i);
	element.setAttribute("name", type+i);
	element.setAttribute("class",'mquestions')
	i++
	var foo = document.getElementById("quecontainer");

	//Append the element in page (in span).
	console.log(element)
	foo.appendChild(element );
	var newbreaker = document.createElement("br")
	foo.appendChild(newbreaker)
}





var k= 5
function addMultiq(type) {
	k++
	var element = document.createElement("input");
	//Assign different attributes to the element.
	element.setAttribute("type", type );
	element.setAttribute("value", '选择题'+k);
	element.setAttribute("id", "mque"+k);
	element.setAttribute("class",'mquestions')
	// var elementans = document.createElement("input")
	// elementans.setAttribute("type",type)
	// elementans.setAttribute("value", '选择题'+k+"答案");
	// elementans.setAttribute("id", "mque"+k+"answer");
	// elementans.setAttribute("class",'mulqanswers')

	
	var foo = document.getElementById("container1");

	foo.appendChild(element );
	var newbreaker = document.createElement("br")
	foo.appendChild(newbreaker)
	// foo.appendChild(elementans );
	// var newbreaker = document.createElement("br")
	// foo.appendChild(newbreaker)
}
////////////////////////////////////////////////////////////////////////提交选择题*************************************/		

var multanscollection = []
var m=0
				function addInput(divName) {
					if (m+1<= k){
					m++
					document.getElementById('addbtn').value	="为第"+(m+1)+"题添加选项"
					
					var choices=[];
		choices[0]=document.getElementById('answer').value;
		choices[1]=document.getElementById('answer1').value;
		choices[2]=document.getElementById('answer2').value;
		choices[3]=document.getElementById('answer3').value;
					
					var select = $("<select/>")
					var singlequeAns=[]
					$.each(choices, function(a, b) {
						select.append($("<option/>").attr("value", b).text(b));
						singlequeAns.push(b)
					});
					$("#" + divName).append(select);
					multanscollection.push(singlequeAns)
				}	
				}
	
				function deletAnswers(){
					if  (m  !=0){
						m--
					}	
					document.getElementById('addbtn').value="为第"+(m+1)+"题添加选项和答案"
                    var select =document.querySelectorAll('select')
                    document.getElementById('dynamicInput').lastElementChild.remove()
				}
				
				
				function submitMulti(){
					console.log(multanscollection)
					
				    var multquescollection = [];
					var correct =[]
					var choices =document.getElementsByTagName('select')
					$('select').each(function() {
					var selected = $(this).find(":selected");
					correct.push(selected.val())
					})

					var usermodel ={}
					$("input[class='mquestions']").each(function() {
				    
					multquescollection.push($(this).val());
					});
					console.log(multquescollection)
					// console.log(multquescollection.length)
					// console.log(m)
					// console.log(k)
					
					usermodel.name=userid
					usermodel.questions={}
					usermodel.questions.编辑好的选择题= {}
					usermodel.questions.编辑好的选择题.答案=[]
					usermodel.questions.编辑好的选择题.问题={}
					
					var alreadySeen = [];
                    var duplicate =false
					multquescollection.forEach(function(str) {
					if (alreadySeen[str])
						{alert(str+'____问题重复')
						duplicate =true}
						 
					else{
						alreadySeen[str] = true;
					   }
					})
					if (duplicate){
						escape
					}
					else{
					if (m > 4 && m >multquescollection.length){alert('选项过多') }else if (m < multquescollection.length){alert('选项不够')}
				  else { 
					 for (var l=0 ; l< m & l<multquescollection.length;l++){
						 if (multquescollection[l]!=" ")
						usermodel.questions.编辑好的选择题.问题[multquescollection[l]] = multanscollection[l]
						usermodel.questions.编辑好的选择题.答案[l]= correct[l]
						// usermodel.questions.编辑好的选择题["第"+`${l}`+"题的正确答案"]=
					}
					
					usermodel.uploadTime= Date.now().toString()
					console.log(usermodel)
				
					var jsonContent = JSON.stringify(usermodel);
					console.log(jsonContent);
					$.ajax({
						type:'POST',
						url:'/mymulti/upload',
						contentType: "application/json",
						data: jsonContent,
						success: function(){console.log('上传请求已送出')}
						}).then((res)=>{
							alert((res)+`\n`+"上传成功")            
						})
				  }
				}			

				}

/****************************************************从服务器获取数据**********************************************/
            var userid = localStorage.getItem('currentUSER')
	        $(document).ready(function(){
	        
	       
	  	        $.ajax({
					type:'GET',
					url:'/myarbitras/',
					contentType: "application/json",
					data: body ={"获取":"全部问题","用户":`${userid}` },
					success: function(){console.log('获取请求已发送')
					},
					}).then((res)=>{

					var recieve = JSON.parse(res)
					console.log(recieve.编辑好的主观题)
					var allOri = recieve.编辑好的主观题
					var HR =document.createElement("hr")
					var DIV=document.getElementById('container')
					DIV.append(HR)
					var label =document.createElement("label")
					label.setAttribute('style', display='block' )

					DIV.append(label.value="-----------------------------------------------------已保存的主观题-------------------------------------------------------",)
					var HR =document.createElement("hr")
					DIV.append(HR)
                    var j =0
				    
                     allOri.forEach(eachque =>  {
					var element = document.createElement("p");
					element.innerText= eachque;
					element.setAttribute("name", "ORinput"+j.toString());
					element.setAttribute("class",'ORinputs')
					j++
					
					DIV.append(element );
					var newbreaker = document.createElement("br")
					DIV.append(newbreaker)
					})
				})

				$.ajax({
					type:'GET',
					url:'/mymulti',
					contentType: "application/json",
					data: body ={"获取":"全部选择题","用户":`${userid}` },
					success: function(){console.log('获取请求已发送')
					},
					}).then((res)=>{
						var recieve = JSON.parse(res)
					console.log(recieve.编辑好的选择题)
					var allOri = recieve.编辑好的选择题
					var HR =document.createElement("hr")
					var DIV=document.getElementById('container2')
					DIV.append(HR)
					var label =document.createElement("label")

					DIV.append(label.value="-----------------------------------------------------已保存的选择题-------------------------------------------------------",)
					var HR =document.createElement("hr")
					DIV.append(HR)
                    var j =0
					//  allOriques = Object.keys(allOri)
					//  allOrians= Object.values(allOri)
					 

for (const allOriques in allOri) {
//   console.log(`${allOriques}: ${allOri[allOriques]}`);

                    if (allOriques!='答案'){
					
					for (que in allOri['问题']){
						var element = document.createElement("p");
						element.setAttribute("name", "ORmuti"+j.toString());
					element.setAttribute("class",'ORmultis')
					var anselement = document.createElement("p");
					anselement.innerText=JSON.stringify(allOri['问题'][que])
					element.innerText=que
					j++
					
					DIV.append(element );
					DIV.append(anselement );
					var newbreaker = document.createElement("br")
					DIV.append(newbreaker)
					};
				
					// var anselement = document.createElement("text")
		    // function setup(){
			// var ansgraph = createCavas(900,90)
			// stroke(255);               
            // Fill(255,210,120);   
			// // ansgraph.createElement()
			// ansgraph.position(500,1200)
			// }
			// function draw(){
			// 	ansgraph.ellipse( 20,40,40,40) 
			// 	ansgraph.ellipse( 140,40,40,40) 
			// 	ansgraph.ellipse( 260,40,40,40) 
			// 	ansgraph.ellipse( 380,40,40,40) 
			// }


				}
			}
					})


		//    var usercollection = (JSON.stringify(userdata))
		//    console.log(usercollection)
		var submquestions = document.getElementById('submques')
		////////////////////////////////////////////////////////////////提交问题**********************************************************/
		submquestions.onclick=function()
		 {
		//  var allques = document.getElementsByClassName('.questions')	
		//  console.log(JSON.parse( allques))
		
		 quescollection = [];

		 var usermodel ={}
         $("input[class='questions']").each(function() {
		 quescollection.push($(this).val());
		 });
		 

		 usermodel.name=userid
		 usermodel.questions= {"编辑好的主观题":quescollection}
		 usermodel.uploadTime= Date.now().toString()
		 
		 console.log(usermodel)
         
		  console.log(quescollection);	
          
			// var jsonObj = JSON.parse(quescollection);
			// console.log(jsonObj);
			
			var jsonContent = JSON.stringify(usermodel);
			console.log(jsonContent);

			$.ajax({
				type:'POST',
				url:'/myarbitrary/upload',
				contentType: "application/json",
				data: jsonContent,
				success: function(){console.log('上传请求已送出')}
				}).then((res)=>{
					console.log(res)            
				})
			}
				
			})
		/***********************************************换页****************************************************/	
         function showSETTING(){
	
			var viewing =document.getElementById('wrapper')
			   viewingpage = viewing.getElementsByTagName('div')
			   $.each( viewingpage,function(){this.style.display='block'})
			   document.getElementById('btn1').disabled =true
			   document.getElementById('btn2').disabled =false

		
         }
	function showRECEIVE() {
		var viewing =document.getElementById('wrapper')
			var settingpage =viewing.getElementsByTagName('div')
			   $.each( settingpage,function(){this.style.display='none'})
			   document.getElementById('btn1').disabled =false
			   document.getElementById('btn2').disabled =true

////////////////////////////////////////////////////////////////////////////////https://showcase.api.linx.twenty57.net/UnixTime/fromunix?timestamp=
			   document.getElementById('wrapper1').style.display='block'
			   var receiveframe= document.getElementById('wrapper1')
               $.ajax({
				type:'GET',
				url:'/myactivities',
				contentType: "application/json",
				data: body ={"获取":"我的回答记录","用户":`${userid}` },
				success: function(){console.log('请求已送出')}
				}).then((res)=>{
					console.log(JSON.parse(res))  
					var myallActi =JSON.parse(res)
					async function getFormatedTime(unixt){
						resp =await fetch(url="https://showcase.api.linx.twenty57.net/UnixTime/fromunix?timestamp="+unixt ,{
						method: 'GET', 
						})
						 var data =await resp.text()
						 receiveframe.append(data)
						 var hr =  document.createElement("hr");
						 receiveframe.append(hr)
					    }
						(async function asyncLoad() { myallActi.forEach( async (activity)=>{
							var unixtime =  (activity.uploadTime).substring(0,activity.uploadTime.length-3)
							getFormatedTime(unixtime).then(()=>{
							  console.log( activity.uploadTime)
							
							  console.log(unixtime)   ;
							  receiveframe.append(`${JSON.stringify(activity.answers)}`);
							var hr =  document.createElement("hr");
							receiveframe.append(hr);
							}
							
							)
                                
                        
						})
						})();
						
						// activity.answers
                          
						// var upinfo =Object.values(res)
						// console.log(upinfo)
						// var uTime = (upinfo)[0]
						// console.log(uTime)
					 
									
                    
				})
			}

 
	}
	else{
		alert('请先登录')
		document.hidden()
	}

        
	
			
			
				
				

	    
	</script>
    </html>